<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .navbar-brand {
            float: left;
            height: 50px;
            padding: 15px 15px;
            font-size: 18px;
            line-height: 20px;
        }
        a {
            color: #337ab7;
            text-decoration: none;
            background-color: transparent;
        }
        .user-panel {
            height: 60px;
            margin-top: 5px;
            padding: 15px 5px 15px 5px;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        div {
            display: block;
        }
        .user-image-left {
            max-width: 45px;
            height: 45px;
            width: 45px;
            border-radius: 50%;
        }
        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .glyphicon-record:before {
            content: "\e165";
        }
        :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .small, small {
            font-size: 85%;
        }
        .search-input {
            border: 1px solid transparent;
            height: 35px;
            width: 85%;
            border-bottom-left-radius: 2px;
            border-top-left-radius: 2px;
            background: #374850;
            text-indent: 10px;
            font-size: 13px;
            outline: none;
        }
        button, input, select, textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }
        button, input, optgroup, select, textarea {
            margin: 0;
            font: inherit;
            color: inherit;
        }
        .panel-group {
            margin-bottom: 20px;
        }
        .panel-group .panel {
            margin-bottom: 0;
            border-radius: 4px;
        }

        .panel-default {
            border: none;
        }
        #accordion .panel-default>.panel-heading, .panel {
            background-color: #222d32;
        }
        .panel-default {
            border-color: #ddd;
        }
        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
            box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
        }
        #accordion .panel-default>.panel-heading, .panel {
            background-color: #222d32;
        }
        .panel-default>.panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
        }
        .panel-group .panel-heading {
            border-bottom: 0;
        }
        .panel-heading {
            padding: 0;
        }
        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
        #accordion a {
            color: #b8c7ce;
            font-size: 13px;
        }

        .panel-heading .open-menu {
            border-left: 3px solid transparent!important;
        }
        .open-menu {
            display: block;
            border: 0px solid red;
            height: 40px;
            padding: 10px 0 10px 20px;
        }
        .open-menu span {
            margin-right: 5px;
        }
        .pull-right {
            float: right!important;
        }
        #accordion .panel .panel-collapse {
            background: #2c3b41;
            /* padding: 6px; */
        }

        .collapse.in {
            display: block;
        }
        .collapse {
            display: none;
        }
        #accordion ul {
            margin-bottom: -6px;
        }

        ol, ul {
            margin-top: 0;
            margin-bottom: 10px;
        }
        #accordion .panel .panel-collapse li {
            padding: 6px;
        }

        li {
            list-style: none;
            text-align: left;
            display: list-item;
        }
        #accordion li a {
            display: block;
            height: 26px;
            width: 160px;
            border: 0px solid green;
        }
        #accordion a {
            color: #b8c7ce;
            font-size: 13px;
        }
        #accordion li a .glyphicon {
            margin-right: 5px;
        }

        .green {
            background: #00a65a !important;
        }

    </style>
</head>
<body>
<div>
    <!--导航左侧-->
    <div style="width: 316px;height: 1080px">
        <!--上部分-->
        <div style="background: #19a8cc;width: 316px;height: 50px">
            <a href="index.html" class="navbar-brand" style="padding: 8px 40px;">
                <img src="images/oasys.jpg" style="    display: block;">
            </a>
        </div>
        <!--下部分-->
        <div style="background: rgb(34, 45, 50);position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;width: 316px;height: 1030px">
            <div class="user-panel">
                <div style="float: left!important;">
                    <img src="/images/logo.jpg" class="img-circle user-image-left">
                </div>
                <div class="info" style="padding: 5px 5px 5px 15px;float: left!important;">
                    <p style="color: #fff; line-height: 1.5;    margin: 0 0 10px;">
                        <span>soli</span><br> <small><span class="glyphicon glyphicon-record" style="color: #00a65a;">
					</span> 在线</small>
                    </p>
                </div>
            </div>
            <div class="thistable">
                <div style="position: relative; margin-top: 20px;">
                    <input type="text" placeholder="查找..." class="search-input cha">
                    <span style="display: inline-block; height: 35px; width: 38px; background: red; position: absolute; text-align: center; line-height: 35px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; background: #374850;">
				<a href="#" class="chazhao"><span class="glyphicon glyphicon-search" style="color: white;"></span></a>
			       </span>
                </div>
                <div class="panel-group" id="accordion" style="margin-top: 10px; margin-left: -12px;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="open-menu blue-left collapsed" href="javascript:void(0)" data-toggle="collapse" data-parent="#accordion" style="border-left: 3px solid rgb(0, 166, 90);" aria-expanded="false" onclick="isShow()"> <span class="glyphicon glyphicon-education"></span> <span>用户管理</span> <span class="glyphicon pull-right glyphicon-menu-down">v</span>
                            </a>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse in" aria-expanded="true" style="display: none">
                            <ul>
                                <li>
                                    <a href="javascript:void(0)"  > <span class="glyphicon glyphicon-record"></span> <span>部门管理</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:changepath('/morelogrecord');"> <span class="glyphicon glyphicon-record"></span> <span>在线用户</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:changepath('/positionmanage');"> <span class="glyphicon glyphicon-record"></span> <span>职位管理</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:changepath('/usermanage');"  id="getuserlist"> <span class="glyphicon glyphicon-record"></span> <span>用户管理</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                     </div>
                </div>
            </div>
        </div>
        <!--左侧下部分结束-->
    </div>
    <!--右侧导航-->
    <div class="green" style="width: 1583px;height: 50px;float: left;position: absolute;
    min-height: 1px;
        left: 318px;
    top: 8px;">

        <!--导航栏左侧按钮，-->
<!--        <ul class="nav navbar-nav navbar-left" style="margin-left: -15px;">-->
<!--            <li><a href="#" class="green-none white"><span-->
<!--                    class="glyphicon glyphicon-menu-hamburger"></span></a></li>-->
<!--        </ul>-->
<!--        &lt;!&ndash;右侧导航栏&ndash;&gt;-->
<!--        <ul class="nav navbar-nav navbar-right moredeep">-->

<!--            <li><a href="javascript:changepath('/infromlist');" class="green-none white"><span-->
<!--                    class="glyphicon glyphicon-bell"></span>-->
<!--                <span class="badge blue-badge badge-notice"></span>-->
<!--                <span class="badge blue-badge badge-notice"></span>-->
<!--                </a>-->
<!--            </li>-->

<!--            <li class="dropdown">-->
<!--                &lt;!&ndash;设置导航栏头像面板&ndash;&gt;-->
<!--                <a href="#" class="green-none white" data-toggle="dropdown">-->
<!--                    <img src="/image/" class="user-image" /> <span>soli</span>-->
<!--                </a> &lt;!&ndash;设置点击按钮弹出用户面板层&ndash;&gt;-->
<!--                <ul class="dropdown-menu" style="padding:0;">-->
<!--                    <li class="user-header green"><img src="/image/"-->
<!--                                                       class="img-circle" style="width: 100px;height:100px;" />-->
<!--                        <p class="white" style="">-->
<!--                            <span>研发部 </span> / <span> soli</span><br> <small>soli</small>-->
<!--                        </p></li>-->
<!--                    <li class="user-footer">-->
<!--                        <div class="pull-left">-->
<!--                            <a href="javascript:changepath('userpanel');" class="btn btn-default">用户面板</a>-->
<!--                        </div>-->
<!--                        <div class="pull-right">-->
<!--                            <a href="loginout" class="btn btn-danger">退出登录</a>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </li>-->

<!--            <li style="position: relative;"><a  id="history" class="green-none white" data-toggle="dropdown"><span-->
<!--                    class="glyphicon glyphicon-time"></span></a>-->

<!--                <ul id="historypanel" class="dropdown-menu"-->
<!--                    style="position: absolute; background-color: #222d32;">-->

<!--                </ul>-->
<!--            </li>-->
<!--        </ul>-->
    </div>
    <!--右侧导航结束-->
</div>
<script src="js/jquery.js"></script>
<script>
    var flag = false;
  function isShow() {
      if (flag){
          $("#collapse2").hide();
          flag = false;
      }else {
          $("#collapse2").show();
          flag = true;
      }

  }

    $("#getuserlist").click(function () {
        /*
        * 1.发送请求到服务器
        *
        * */
        $.ajax({
            //data:"",/*发送的数据，请求是查询，一般不需要传值*/
            //dataType:"json",/*服务器返回的数据类型*/
            url:"user/list", /*请求的地址,必写*/
            type:"GET",/*请求方式：get（直接显示）、post（加密）*/
            cacha:false,  /*相同请求是否从缓存中读取数据*/
            success:function () {},  /*如果请求成功要做的操作*/
            error:function () {},/*请求失败的操作*/
        })

    })


</script>

</body>
</html>